<template>
  <div class="container">
    <div class="charts01" ref="charts01"></div>
    <!-- <div class="charts02" ref="charts02"></div> -->
    <!-- <div class="charts03" ref="charts03"> </div> -->
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonIndex',

  data() {
    return {
      source:[
        ['大前端', '学习人数', '就业人数'],
        ['周一', 0, 100],
        ['周二', 20, 30],
        ['js', 40, 50]
      ]
    }
  },

  mounted() {
    this.intchart()
    this.initchart02()
    this.initchart03()
  },
  created() {},
  methods: {
    intchart() {
      let echart = this.$echarts.init(this.$refs.charts01)
      console.log('-----', echart)
      console.log('+++++++', this.$refs)
      //数据源
      const source = this.source
      // 指定图表的配置项和数据
      const option = {
        tooltip: {},
        /*
         * dataset数据集
         *   source 数据源 []
         * */
        dataset: {
          source
        },

        /*x轴
         *   type 轴的类型
         *       category 类目轴，离散型数据
         *       value 数值轴，连续性数据
         * */
        xAxis: {
          // type: 'time',
          name: '时间',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] 
        },
        yAxis: {
          type: 'value'
        },
        /*系列列表*/
        series: [
          {
            type: 'bar'
          },
          {
            type: 'bar'
          },
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      echart.setOption(option)
    },

    initchart02() {
      let echart = this.$echarts.init(this.$refs.charts02)
      let option = {
        title: {
          text: '这是二号图表',
          textAlign: 'left'
        },
        tooltip: {},
        // 图例
        legend: { data: ['睡眠时长', '玩游戏时长', '上课时长'] },
        // x轴线
        xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        // y轴线
        yAxis: {},
        // 设置数据
        series: [
          {
            // 数据名称
            name: '睡眠时长',
            // 类型为柱状图
            type: 'bar',
            // 数据data
            data: [8, 10, 4, 5, 9, 4, 8]
          },
          {
            // 数据名称
            name: '玩游戏时长',
            // 类型为柱状图
            type: 'line',
            // 数据data
            data: [2, 4, 1, 5, 6, 8, 5]
          },
          {
            // 数据名称
            name: '上课时长',
            // 类型为柱状图
            type: 'line',
            smooth: true,
            // 数据data
            data: [6, 7, 5, 8, 6, 1, 0],
            areaStyle: '#f70'
          },
          {
            name: '成绩',
            // 饼形图
            type: 'pie',
            // radius:80,
            // 半径
            radius: ['10%', '20%'],
            // 位移
            left: '-10%',
            top: '-50%',
            // 数据
            data: [
              { name: 'js', value: 90 },
              { name: 'html', value: 85 },
              { name: 'jq', value: 90 },
              { name: 'vue', value: 50 }
            ]
          }
        ]
      }
      echart.setOption(option)
    },

    initchart03() {
      var linear = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#02bcff' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#5555ff' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
      console.log(linear)
      let echart = this.$echarts.init(this.$refs.charts03)
      let option = {
        title: {
          text: '这是三号图表',
          textAlign: 'left'
        },
        // 图表的提示
        tooltip: {},
        // 图例
        legend: { data: ['睡眠时长', '玩游戏时长', '上课时长', '成绩'] },
        // x轴线
        xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        // y轴线
        yAxis: {},
        // 设置数据
        series: [
          {
            // 数据名称
            name: '睡眠时长',
            // 类型为柱状图
            type: 'bar',
            // 数据data
            data: [8, 10, 4, 5, 9, 4, 8],
            // color:["#ac4cff"]
            itemStyle: {
              color: linear,
              borderRadius: [30, 30, 0, 0]
            }
          },
          {
            // 数据名称
            name: '玩游戏时长',
            // 类型为柱状图
            type: 'line',
            // 数据data
            data: [2, 4, 1, 5, 6, 8, 5]
          },
          {
            // 数据名称
            name: '上课时长',
            // 类型为柱状图
            type: 'line',
            smooth: true,
            // 数据data
            data: [6, 7, 5, 8, 6, 1, 0]
            // areaStyle:"#f70"
          },
          {
            name: '成绩',
            // 饼形图
            type: 'pie',
            // radius:80,
            // 半径
            radius: [80, 50],
            // 位移
            left: -80,
            top: -270,
            // 数据
            data: [
              { name: 'js', value: 90 },
              {
                name: 'html',
                value: 85,
                itemStyle: {
                  color: '#ffaa00'
                }
              },
              {
                name: 'jq',
                value: 90,
                itemStyle: {
                  normal: { color: '#93da6c' },
                  emphasis: { color: '#bcff57' }
                }
              },
              { name: 'vue', value: 50 }
            ]
          }
        ]
      }
      echart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  padding: 10px;
}
.charts01 {
  height: 200px;
  width: 200px;
  background: #000;
}
// .charts02 {
//   height: 700px;
//   width: 600px;
//   background: #000;
//   margin-left: 20px;
// }
// .charts03 {
//   height: 700px;
//   width: 600px;
//   background: #000;
//   margin-left: 20px;
// }
</style>
